<template>
  <div class='companylist-container'>
    <div class="table-header">
      <el-row>
        <el-col :lg="{span:15,offset:9}"
                :md="{span:17,offset:7}"
                :sm="{span:20,offset:4}"
                :xs="{span:22,offset:2}"
                align="right"
                class="pull-right">
          <el-select class="col-4"
                     style="margin-right:10px;"
                     v-model="requestParam.company_type">
            <el-option label="全部"
                       value="">
            </el-option>
            <el-option v-for="(item, index) in companyTypeList"
                       :key="index"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-input class="col-4"
                    v-model="requestParam.company_name"
                    placeholder="单位名称"></el-input>
          <el-button @click="onSearch"
                     class="search"
                     type="primary">查询</el-button>
          <el-button type="primary"
                     @click="showEditCompanyDialog('create',{})">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :highlight-current-row='true'
              :header-cell-style="{background:'#f5f5f5'}"
              class="company-list-table"
              :data='companyListData.data'
              border>

      <el-table-column label='序号'
                       align='center'
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop='company_name'
                       label='单位名称'
                       align='center'
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop='company_type_name'
                       label='单位类型'
                       align='center'
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop='created_at'
                       label='创建时间'
                       align='center'
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label='操作'
                       width="200px"
                       align='center'
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text"
                     @click="showEditCompanyDialog('detail',scope.row)">详情</el-button>
          <el-button @click="showEditCompanyDialog('update',scope.row)"
                     type="text">编辑</el-button>

          <el-button type="text"
                     @click="deleteCompanyConfirm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change='handlePageChange'
                   :current-page='requestParam.page'
                   :page-size='requestParam.page_size'
                   layout='total,sizes,prev, pager, next, jumper'
                   background
                   :total='companyListData.total'
                   align='center'>
    </el-pagination>
    <EditCompanyDialog @callback="editCallback"
                       :dialogVisible.sync="editCompanyDialogVisible"
                       :dialogStatus="editCompanyStatus"
                       :dialogForm="editCompanyData"></EditCompanyDialog>
  </div>
</template>
<script>
import EditCompanyDialog from './components/EditCompanyDialog'
import { companyListApi } from '@/services/CompanySetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      requestParam: {
        company_name: '',
        company_type: '',
        page: 1,
        per_page: 10
      },

      companyListData: {
        data: [],
        total: 0
      },
      // 编辑单位弹框是否可见
      editCompanyDialogVisible: false,
      // 新增或编辑单位状态
      editCompanyStatus: '',
      // 新增或编辑表单数据对象
      editCompanyData: {
        company_type: '',
        company_name: '',
        contact_name: ''
      },
      companyTypeList: []
    }
  },
  components: {
    EditCompanyDialog
  },
  methods: {
    // 分页
    handlePageChange (page) {
      this.requestParam.page = page
      this.getCompanyList()
    },
    // 展示编辑单位弹框
    showEditCompanyDialog (type, data) {
      this.editCompanyStatus = type
      this.editCompanyData = data
      this.editCompanyDialogVisible = true
    },
    // 删除单位
    deleteData (row) {
      console.log(row)
    },
    //查询
    onSearch () {
      this.requestParam.page = 1;
      // 获取单位列表
      this.getCompanyList()
    },
    // 获取单位列表
    getCompanyList () {
      companyListApi.getCompanyList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.companyListData = res.data
          this.companyListData.data.map((item) => {
            item.company_type_name = this.getCompanyTypeName(item.company_type)
          })
        }
      })
    },
    // 获取单位类型标准吗
    getCompanyTypeList () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'companyType'
        }
      }).then(res => {
        console.log(res, 'get car status')
        if (res.code === 0 && res.data.list) {
          this.companyTypeList = res.data.list
          window.localStorage.setItem('companyType', JSON.stringify(this.companyTypeList))
        }
      }, err => {
        console.log(err)
      })
    },
    // 新增或编辑单位成功回调
    editCallback () {
      this.getCompanyList()
    },
    // 根据单位类型id获取对应的单位类型名称
    getCompanyTypeName (type) {
      let name = ''
      this.companyTypeList.map((item) => {
        if (item.value === type) {
          name = item.name
        }
      })
      return name
    },
    // 删除单位确认弹框
    deleteCompanyConfirm (row) {
      let requestParam = {
        id: row.company_rela_id
      }
      this.$confirm('是否删除该单位？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCompany(requestParam)
      }).catch(() => {

      })
    },
    // 删除单位接口
    deleteCompany (requestParam) {
      companyListApi.deleteCompany({
        data: requestParam
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除单位成功')
          this.getCompanyList()
        }
      }, err => {
        console.log(err)
      })
    }
  },
  async created () {
    let local = window.localStorage.getItem('companyType')
    if (local) {
      this.companyTypeList = JSON.parse(local)
    } else {
      // if (window.sessionStorage.getItem('access_token')) {
      if (window.localStorage.getItem('access_token')) {
        await this.getCompanyTypeList()
      }
    }
    this.getCompanyList()
  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
.companylist-container {
  padding: 20px;
  .table-header {
    width: 100%;
    height: 64px;
    background-color: #fff;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    .search {
      margin-left: 10px;
    }
  }
  .company-list-table {
    margin-bottom: 20px;
  }
}
</style>
